<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jsonp.js"></script>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <div class="wrap">
        <div class="headerContainer">
            <img src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png">
            <div class="catalog">
                目录
            </div>
            <div class="searchContainer">
                <input type="text" class="searchInput" />
                <button class="btn"></button>
            </div>
            <div class="iconShow">
                <span class="iconMessage"></span>
                消息
            </div>
            <div class="iconShow">
                <span class="iconCollect"></span>
                收藏
            </div>
        </div>
        <h3 class="sub_title">
            全部食品
        </h3>
        <div class="nav_box">
            <div class="txt">
                <span>￥</span>
            </div>
            <span class="divid">-</span>
            <div class="txt">
                <span>￥</span>
            </div>
            <a class="confirm_btn" href="javascript:;">确定</a>
        </div>
        <div class="itemContainer">
            <!-- 商品呈现 -->
            <!-- <div class="item">
                <img
                    src="https://s11.mogucdn.com/mlcdn/c45406/180830_0ggfhcfd757g3jg8k8fjaclc3h123_640x960.jpg_440x587.v1cAC.40.webp" />
                <div class="bottom-describe">
                    <p class="describe">
                        海底捞火锅1盒懒人自煮自热方便速食牛油麻辣即食小火锅麻辣火锅
                    </p>
                    <div class="priceContainer">
                        <b>¥26.8</b>
                        <span class="oldPrice">￥53.6</span>
                        <span class="mystar">
                            <img src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
                                alt="" />
                            2585
                        </span>
                    </div>
                </div>
            </div> -->


        </div>
    </div>
</body>
<script>
    let page = 1;
    getData();
    function getData() {
        ajax({
            url: "https://list.mogu.com/search",
            data: {
                _version: 8193,
                ratio: "3%3A4",
                cKey: 15,
                page: page,
                sort: "pop",
                ad: 0,
                fcid: 52014,
                action: "food"
            },
            dataType: "jsonp",
            jsonp: "callback",
            success: function (res) {
                if (res.status.code == 1001) {
                    page++;
                    let data = res.result.wall.docs;
                    // console.log(data);
                    data.forEach(item => {
                        createEelement(item);
                    })
                }
            }
        })
    }

    function createEelement(item) {
        console.log(item);
        let mydiv = document.createElement("div");
        mydiv.classList = "item";
        mydiv.innerHTML = `<img
                    src="${item.img}" />
                    <div class="bottom-describe">
                        <p class="describe">
                            ${item.title}
                        </p>
                        <div class="priceContainer">
                            <b>¥${item.price}</b>
                            <span class="oldPrice">￥${item.orgPrice}</span>
                            <span class="mystar">
                                <img src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
                                    alt="" />
                                ${item.cfav}
                            </span>
                        </div>
                    </div>`;
                document.querySelector(".itemContainer").appendChild(mydiv);
    }
    //下拉加载数据；
    document.onscroll = function(){
        let windowHeight = document.documentElement.clientHeight;
        let contentHeight = document.documentElement.offsetHeight;
        let scrollHeight = contentHeight - windowHeight;
        let scrollTop = document.documentElement.scrollTop;
        if(scrollTop>=(scrollHeight-10)){
            getData();
        }

    }

</script>

</html>